<template>
	<div>
		<svg-icon
			class-name="question-svg"
			icon-class="question"
			@click.prevent.stop="guide"
		/>
	</div>
</template>

<script>
	import Driver from 'driver.js'; // import driver.js
	import 'driver.js/dist/driver.min.css'; // import driver.js css
	import './driver.css'; // 修复在 fixHeader===true 状态下的白框覆盖
	import steps from './steps';

	export default {
		name: 'Guide',
		data() {
			return {
				driver: null
			};
		},
		mounted() {
			this.driver = new Driver();
		},
		methods: {
			guide() {
				this.driver.defineSteps(steps);
				this.driver.start();
			}
		}
	};
</script>

<style scoped>
	.question-svg {
		display: inline-block;
		cursor: pointer;
		fill: #5a5e66;
		width: 20px;
		height: 20px;
		vertical-align: 10px;
	}
</style>
